<template>
    <div class="img-dv" v-for="item in list" :key="item.id">
        <img :src="item.url" alt="">
        <el-button type="primary">Primary</el-button>
    </div>
</template>

<script setup lang='ts' name="carts">
import { reactive, nextTick, ref, toRefs } from 'vue'
// import img11 from '@/assets/family.png'
// import img22 from '@/assets/baby-2.jpg'



const list = reactive([
    {
        id: 1,
        // url: img11
        url: new URL('../../assets/family.png',import.meta.url).href
    },
    {
        id: 2,
        // url: img22,
        url: new URL('../../assets/baby-2.jpg',import.meta.url).href
    }
])
// console.log()
</script>


<style scoped lang='scss'>
.img-dv {
    width: 500px;
    height: 300px;
    background-color: pink;

    img {
        width: 100%;
        height: 100%;
    }
}
</style>